<!--要求网页做到极致的速度打开。-->
<!--1：全部采用lazyload-->
<!--2：滚动预加载，检测页面显示部分，载入显示部分图片-->


{include file="common/header"}

this is the index
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<section class="index-carousel">
    <div class="swiper" id="carousel">
        <div class="swiper-wrapper">
            {volist name="banner" id="vo"}
            <div class="swiper-slide">
                <div class="img">
                    <a href="{$vo.jump_url}">
                        <!--1.真实图片路径放在data-src中；2.添加class='swiper-lazy'-->
                        <img data-src="{$vo.img_url}" class="swiper-lazy" onerror="javascript:this.src='__HOME__/images/default.png'" alt="{$vo.seo_keywords}" title="{$vo.seo_keywords}">
                        <!--3.添加占位dom-->
                        <div class="swiper-lazy-preloader"></div>
                    </a>
                </div>
            </div>
            {/volist}
            <div class="btn-prev index-carousel-prev"><i class="fa fa-chevron-left"></i></div>
            <div class="btn-next index-carousel-next"><i class="fa fa-chevron-right"></i></div>
        </div>
    </div>
</section>

 
<!--图片延迟加载演示-->
<section>
    <div class="container">
        <div class="row">
            {volist name="banner" id="vo"}
            <div class="col-4">
                <div class="img">
                    <!--需要延迟加载的图片
                    1.默认显示缺省图 default.png;
                    2.添加延迟加载标记 class='lazy-load';
                    3.data-src存放图片真正路径-->
                    <img src="__HOME__/images/default.png" class="lazy-load" data-src="{$vo.img_url}" alt="">
                </div>
            </div>
            {/volist}
        </div>
    </div>
</section>
<!--图片延迟加载演示-->




<!--演示用，自行删除 end-->
{include file="common/footer"}
{include file="common/js"}
<script>
    new Swiper('#carousel', {
        speed:500,
        loop:true,
        effect:'fade',
        navigation:{
            nextEl: '.index-carousel-next',
            prevEl: '.index-carousel-prev',
        },
        lazy:{
            loadPrevNext: true,//图片延迟加载 dom结构有所变化，往上看
            loadOnTransitionStart:true,
        }
    })
</script>
</body>
</html>
